<template>
    <div class="all">
        <div class="top">
            <div class="top_left">
                <span class="bg"></span> 
                <span>
                    <p>李华</p>
                    <p>560积分</p>
                </span>
            </div>
            <div class="top_right">
                2022年
            </div>
        </div>
        <div class="content">
            <div class="content_top">
                <div>
                    <p><span>3</span>次</p>
                    <p>服务次数</p>
                </div>
                <div>
                    <p><span>3</span>次</p>
                    <p>服务次数</p>
                </div>
                <div>
                    <p><span>3</span>次</p>
                    <p>服务次数</p>
                </div>
            </div>
            <div class="content_center">
                <RouterLink :to="`/serviceinfo/${item.id}`" v-for="(item,index)  in list">
                    <div>
                        <span>{{ item.status }}</span>
                    </div> 
                    <p>
                        {{item.content}}......
                        <br>
                        <span>{{ item.source }} &emsp; {{item.recordTime}}</span>
                    </p>                        
                </RouterLink>
            </div>
            <p>没有更多了</p>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import {getMyservices} from '@/api/volunteerApi.js'

// let list = ref([
//     {
//         id:1,   //活动id
//         source:'某某志愿者服务中心',//活动来源
//         serviceTime: '2025-5-27 ',       // 服务时间(格式建议:YYYY-MM-DD )
//         location: '中山公园',          // 服务地点(字符串)
//         content: '参与马拉松志愿服务，及时清理垃圾，不让路边的花海受到污染，确保了比赛生态文明安全',           // 服务内容(文本描述)
//         photos: [],            // 服务照片(数组存储URL)
//         duration: 5,           // 服务时长(单位:小时，数字类型)
//         recordTime: new Date('yyyy-MM-DD HH:mm'),// 纪实时间(默认当前时间)
//         status: '审核中'      // 审核状态(审核驳回/审核中/审核通过)
//     }
// ])
let list = ref([])
onMounted(async ()=>{
    let res=await getMyservices()   
    res.forEach(item=>{
        if(item.content.length>30){
            item.content=item.content.substring(0,30)+'......'
        }
        else{
            item.content=item.content
        }
    })
   
    list.value=res
    console.log(list);
    
})
</script>
<style scoped>
.all{
    width: 100%;
    height: 100%;
    background-color: var(--bg-accent);
    display: flex;
    flex-direction: column;
}
.top{
    height: 120px;
    background-color: var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px 0px 20px;
}
.top_left{
    width: 150px;
    height: 50%;
    display: flex;
    margin-bottom: 20px;
}
.bg{
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid var(--white);
  background: url(@/assets/OIP-C.jpg) no-repeat center/cover;
  border-radius: 50%;
  margin-right: 10px;
}
.top_left>span:nth-child(2) {
    color: var(--white);
}
.top_left>span:nth-child(2)>p:first-child {
    font-weight: 600;
    font-size: var(--font-md);
    margin-bottom: var(--spacing-xs);
}
.top_left>span:nth-child(2)>p:last-child {
    font-size: var(--font-sm);
    opacity: 0.9;
}
.top_right{
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: var(--white);
    border-radius: 15px;
    margin-bottom: 20px;
    color: var(--primary-color);
    font-weight: 500;
    font-size: var(--font-sm);
}
.content{
    flex: 1;
    background-color: var(--bg-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.content_top{
    width: 80%;
    height: 70px;
    background-color: var(--white);
    border-radius: 10px;
    position: absolute;
    top: -35px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.content_top>div{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content_top>div>p:first-child {
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}
.content_top>div>p:first-child>span {
    font-size: var(--font-xxl);
}
.content_top>div>p:last-child {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.content_center{
    width: 100%;
    margin-top: 55px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--white);
}
.content_center>a>div{
  width: 110px;
  height: 90px;
  background: url(@/assets/volunter-icon.jpg) no-repeat center/contain;
  border-radius: var(--radius-medium);
  overflow: hidden;
}
.content_center>a>div>span{
    background-color: var(--success-color);
    color: var(--white);
    display: inline-block;
    margin-top: 65px;
    padding: 2px 6px;
    border-radius: 15px;
    font-size: var(--font-xs);
    font-weight: 500;
    position: relative;
    z-index: 1;
}
.content_center a{
    width: 92%;
    padding: var(--spacing-md) 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--border-light);
}
.content_center a:last-child {
    border-bottom: none;
}
.content_center p{
    margin-left: 10px;
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--text-primary);
    margin-left: 10px;
    height: 90px;
}
.content_center p>span:first-child {
    font-weight: 600;
    font-size: var(--font-md);
    margin-bottom: var(--spacing-xs);
    flex: 1;
}
.content_center p>span:last-child {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    margin-top: auto;
    word-break: break-all;
}
.content>p {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    text-align: center;
    margin-top: var(--spacing-md);
}
</style>